<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="yAxis">
          <el-divider content-position="center">Y 轴</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="yAxis.show" :label="true">是</el-radio>
              <el-radio v-model="yAxis.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="位置">
               <el-select v-model="yAxis.position" placeholder="left" size="mini">
                <el-option label="左" value="left"/>
                <el-option label="右" value="right"/>
              </el-select>
            </el-form-item>
            <el-form-item label="颠倒">
              <el-radio v-model="yAxis.inverse" :label="true">是</el-radio>
              <el-radio v-model="yAxis.inverse" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="最大值" v-if="yAxis.max">
              <el-input-number v-model="yAxis.max" :min="0" size="mini"></el-input-number>
            </el-form-item>
            <el-divider content-position="center">轴名</el-divider>
            <el-form-item label="轴名">
              <el-input v-model="yAxis.name" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="位置">
               <el-select v-model="yAxis.nameLocation" placeholder="起始" size="mini">
                <el-option label="起始" value="start"/>
                <el-option label="居中" value="center"/>
                <el-option label="末尾" value="end"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="间距">
                <el-input-number v-model="yAxis.nameGap" :min="0" :max="40" size="mini"/>
            </el-form-item>
             <el-form-item label="颜色">
              <el-color-picker v-model="yAxis.nameTextStyle.color" show-alpha size="small" @active-change="nameTextStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="yAxis.nameTextStyle.fontFamily" placeholder="serif" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="yAxis.nameTextStyle.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="yAxis.nameTextStyle.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">轴线</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="yAxis.axisLine.show" :label="true">是</el-radio>
              <el-radio v-model="yAxis.axisLine.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="yAxis.axisLine.lineStyle.color" show-alpha size="small" @active-change="axisLineLinetStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="yAxis.axisLine.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="yAxis.axisLine.lineStyle.type" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="零位置">
              <el-radio v-model="yAxis.axisLine.onZero" :label="true">是</el-radio>
              <el-radio v-model="yAxis.axisLine.onZero" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="左端点">
               <el-select v-model="yAxis.axisLine.symbol[0]" placeholder="none" size="mini">
                <el-option label="无" value="none"/>
                <el-option label="箭头" value="arrow"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="右端点">
               <el-select v-model="yAxis.axisLine.symbol[1]" placeholder="none" size="mini">
                <el-option label="无" value="none"/>
                <el-option label="箭头" value="arrow"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="箭头宽度">
                <el-input-number v-model="yAxis.axisLine.symbolSize[0]" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="箭头高度">
                <el-input-number v-model="yAxis.axisLine.symbolSize[1]" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="箭头偏移">
                <el-input-number v-model="yAxis.axisLine.symbolOffset" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-divider content-position="center">刻度</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="yAxis.axisTick.show" :label="true">是</el-radio>
              <el-radio v-model="yAxis.axisTick.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="位置">
              <el-radio v-model="yAxis.axisTick.inside" :label="true">内</el-radio>
              <el-radio v-model="yAxis.axisTick.inside" :label="false">外</el-radio>
            </el-form-item>
            <el-form-item  label="长度">
                <el-input-number v-model="yAxis.axisTick.length" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="yAxis.axisTick.lineStyle.color" show-alpha size="small" @active-change="axisTickLinetStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="yAxis.axisTick.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="yAxis.axisTick.lineStyle.type" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">分隔线</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="yAxis.splitLine.show" :label="true">是</el-radio>
              <el-radio v-model="yAxis.splitLine.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="yAxis.splitLine.lineStyle.color" show-alpha size="small" @active-change="splitLineLinetStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="yAxis.splitLine.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="yAxis.splitLine.lineStyle.type" placeholder="dashed" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">标签</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="yAxis.axisLabel.show" :label="true">是</el-radio>
              <el-radio v-model="yAxis.axisLabel.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="朝向">
              <el-radio v-model="yAxis.axisLabel.inside" :label="true">内</el-radio>
              <el-radio v-model="yAxis.axisLabel.inside" :label="false">外</el-radio>
            </el-form-item>
            <el-form-item  label="旋转角度">
              <el-input-number v-model="yAxis.axisLabel.rotate" :min="-90" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="yAxis.axisLabel.color" show-alpha size="small" @active-change="axisLabelColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="yAxis.axisLabel.fontFamily" placeholder="serif" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="yAxis.axisLabel.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="yAxis.axisLabel.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="行高">
              <el-input-number v-model="yAxis.axisLabel.lineHeight" :min="0" :max="50" size="mini"></el-input-number>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    nameTextStyleColor (val) {
      this.yAxis.nameTextStyle.color = val
    },
    axisLineLinetStyleColor (val) {
      this.yAxis.axisLine.lineStyle.color = val
    },
    axisTickLinetStyleColor (val) {
      this.yAxis.axisTick.lineStyle.color = val
    },
    splitLineLinetStyleColor (val) {
      this.yAxis.splitLine.lineStyle.color = val
    },
    axisLabelColor (val) {
      this.yAxis.axisLabel.color = val
    }
  },
  computed: {
    yAxis () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.yAxis
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
